<template>
  <div class="home-page">
    <!-- 头部导航 -->
    <AppHeader title="饿了么 首页" />

    <!-- 搜索栏 -->
    <div class="search-section">
      <div class="search-fixed">
        <div class="search-box" @click="goSearch">
          <i class="fa fa-search"></i> 搜索饿了么商家、商品名称
        </div>
      </div>
    </div>

    <!-- 分类导航 -->
    <ul class="category-list">
      <li
          v-for="(cat, index) in categories"
          :key="index"
          @click="goCategory(cat.route)"
      >
        <img :src="cat.icon" alt="分类图标" />
        <p>{{ cat.name }}</p>
      </li>
    </ul>

    <!-- 推荐商家标题 -->
    <div class="recommend-title">
      <div class="line"></div>
      <p>推荐商家</p>
      <div class="line"></div>
    </div>

    <!-- 排序筛选栏 -->
    <ul class="filter-bar">
      <li @click="sortType = 'default'">综合排序</li>
      <li @click="sortType = 'distance'">距离最近</li>
      <li @click="sortType = 'sales'">销量最高</li>
      <li @click="openFilter">筛选 <i class="fa fa-filter"></i></li>
    </ul>

    <!-- 推荐商家列表 -->
    <ul class="business-list">
      <BusinessItem
          v-for="(item, index) in filteredBusinesses"
          :key="index"
          :img="item.img"
          :name="item.name"
          :startPrice="item.startPrice"
          :deliveryFee="item.deliveryFee"
          :description="item.description"
          @enter-business="goBusinessDetail"
      />
    </ul>

    <!-- 底部导航 -->
    <AppFooter />
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import BusinessItem from '@/components/BusinessItem.vue'
// 引入分类图标（可替换为实际路径）
import foodIcon from '@/assets/img/dcfl01.png'
import fruitIcon from '@/assets/img/dcfl02.png'
import snackIcon from '@/assets/img/dcfl03.png'
// 模拟商家数据（可从接口获取）
const mockBusinesses = [
  {
    img: require('@/assets/img/sj01.png'),
    name: '万家饺子（软件园E18店）',
    startPrice: 15,
    deliveryFee: 3,
    description: '各种饺子炒菜'
  },
  {
    img: require('@/assets/img/sj02.png'),
    name: '小杨烤肉（科技路店）',
    startPrice: 20,
    deliveryFee: 4,
    description: '特色西北烤肉'
  },
  {
    img: require('@/assets/img/sj03.png'),
    name: '奈雪的茶（高新店）',
    startPrice: 18,
    deliveryFee: 5,
    description: '网红茶饮&欧包'
  }
]

export default {
  components: {
    AppHeader,
    AppFooter,
    BusinessItem
  },
  data() {
    return {
      // 分类导航数据
      categories: [
        { name: '美食', icon: foodIcon, route: '/businessList' },
        { name: '水果生鲜', icon: fruitIcon, route: '/fruit' },
        { name: '小吃外卖', icon: snackIcon, route: '/snack' }
      ],
      // 商家数据
      businesses: mockBusinesses,
      // 排序类型：default/distance/sales
      sortType: 'default',
      // 筛选条件（示例）
      filterConditions: {
        minPrice: 0,
        maxPrice: 100
      }
    }
  },
  computed: {
    // 筛选排序后的商家列表
    filteredBusinesses() {
      // 筛选逻辑（示例：价格区间）
      let list = this.businesses.filter(item => {
        return item.startPrice >= this.filterConditions.minPrice
            && item.startPrice <= this.filterConditions.maxPrice
      })
      // 排序逻辑
      if (this.sortType === 'distance') {
        // 模拟距离排序（实际需接口返回距离字段）
        list = list.sort(() => Math.random() - 0.5)
      } else if (this.sortType === 'sales') {
        // 模拟销量排序（实际需接口返回销量字段）
        list = list.sort(() => Math.random() - 0.5)
      }
      return list
    }
  },
  methods: {
    // 跳转搜索页（可扩展搜索逻辑）
    goSearch() {
      this.$router.push('/search')
    },
    // 跳转分类页
    goCategory(route) {
      this.$router.push(route)
    },
    // 打开筛选弹窗（可扩展复杂筛选）
    openFilter() {
      alert('打开筛选弹窗，可在此设置更多条件');
      // 实际可结合弹窗组件实现：
      // this.$refs.filterDialog.open()
    },
    // 进入商家详情页
    goBusinessDetail() {
      this.$router.push('/businessInfo')
    }
  }
}
</script>

<style scoped>
.home-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 搜索栏 */
.search-section {
  width: 100%;
  background-color: #0097FF;
}
.search-fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 13vw;
}
.search-box {
  width: 90%;
  height: 9vw;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 3vw;
  font-size: 3.5vw;
  color: #AEAEAE;
  cursor: pointer;
}
.search-box .fa-search {
  margin-right: 2vw;
}

/* 分类导航 */
.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #fff;
  padding: 4vw 0;
}
.category-list li {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4vw;
  cursor: pointer;
}
.category-list li img {
  width: 12vw;
  height: 12vw;
  margin-bottom: 2vw;
}
.category-list li p {
  font-size: 3.2vw;
  color: #666;
}

/* 推荐商家标题 */
.recommend-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4vw 0;
}
.recommend-title .line {
  width: 6vw;
  height: 0.3vw;
  background-color: #888;
}
.recommend-title p {
  font-size: 4vw;
  margin: 0 4vw;
  color: #333;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 3vw 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.filter-bar li {
  font-size: 3.5vw;
  color: #555;
  cursor: pointer;
}

/* 商家列表 */
.business-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.business-list li {
  background-color: #fff;
  margin-bottom: 3vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>